<template>
  <div>
    <a-empty class="mt100" v-if="layoutId.length===0" description="请选择字段"></a-empty>
    <div v-else>
      <a-form class="form">
        <a-form-item label="字段名称">
          {{ layoutName }}
        </a-form-item>
        <a-form-item label="字段占宽度">
          <ZgNumber v-model="obj.span"></ZgNumber>
        </a-form-item>
        <a-form-item label="左偏移">
          <ZgNumber v-model="obj.offset"></ZgNumber>
        </a-form-item>
        <a-form-item label="分隔符">
          <ZgInput v-model="obj.divider"></ZgInput>
        </a-form-item>
        <a-form-item label="单位">
          <ZgInput v-model="obj.unit"></ZgInput>
        </a-form-item>
        <a-form-item label="显示标签">
          <ZgSwitch v-model="obj.showLabel"></ZgSwitch>
        </a-form-item>
        <a-form-item label="仅显示值">
          <ZgSwitch v-model="obj.showVal"></ZgSwitch>
        </a-form-item>
        <a-form-item label="是否隐藏">
          <ZgSwitch v-model="obj.isHide"></ZgSwitch>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    layoutId: {
      type: String,
      default: ''
    },
    layoutName: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      obj: {
        id: '',
        span: 12,
        offset: 0,
        divider: '',
        unit: '',
        showLabel: true,
        showVal: false,
        isHide: false
      }
    }
  },
  watch: {
    layoutId () {
      this.search()
    }
  },
  mounted () {
    this.search()
  },
  methods: {
    search () {
      if (this.layoutId.length === 0) {
        return
      }
      this.$http.get('/zg-autoform/zxb/layout/info', { id: this.layoutId }, info => {
        this.obj = info
      })
    },
    save () {
      this.$http.post('/zg-autoform/zxb/layout/update', this.obj, () => {
        this.$success({ title: '操作成功！' })
        this.$emit('ok', this.obj)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
